<style>
    .pop-title {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        border-left: solid #428bca 5px;
        border-bottom: solid #428bca 1px;
        font-size: 16px;
        font-weight: bold;
        color: #0a8021;
        text-overflow: ellipsis;
    }

    .pop-content {
        width: 100%;
        padding: 5px;
    }

    .pop-photo {
        width: 40%;
        float: left;
        overflow: hidden;
    }

    .pop-photo > img {
        width: 85px;
        height: 85px;
    }

    .pop-info {
        width: 60%;
        float: left;
        overflow: hidden;
    }

    .pop-info > p {
        min-height: 20px;
        max-height: 40px;
        line-height: 20px;
        margin: 0;
        font-size: 13px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .pop-info a {
        color: #428bca;
    }

    .pop-info a:hover {
        text-decoration: underline;
        cursor: pointer;
    }
</style>
<style>
    .every_people{
      width: 250px;
      height: 120px;
      /*margin: 30px 15px 0 15px;*/
      border: none;
    }
    .every_people h3{
        width: 100%;
        float: left;
        height: 20px;
        font-size: 16px;
        color: #0A8021;
        font-weight:bold;
        line-height: 20px;
        text-overflow:ellipsis;
    }
    .every_people .every_people_info{
        width: 100%;
        float: left;
        display: block;
    }
    .touxiang{
        float: left;
        width: 85px;
        height: 85px;
        margin-right: 15px;;
    }
    .touxiang img{
        width: 85px;
        height: 85px;
        border: none;
    }
    .basic_info{
       width: 150px;
       float: left;
    }
    .basic_info h4{
        width: 100%;
        height: 25px;
        line-height: 25px;
        font-size: 16px;
        color:#434343;
        font-weight: bold;
    }
    .basic_info p, .basic_infa a{
        width: 100%;
        float: left;
        height: 25px;
        line-height: 25px;
        font-size: 12px;
    }
    .basic_info p{
        color: #434343;
    }
    .basic_info a{
        color: #428bca;
    }
    .ui-dialog{
        background-color: #FFF;
        padding: 0;
        border: 1px solid #DDD;
        -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .float_win{
        position: absolute;
        height: auto;
        width: 700px;
        top: 80px;
        left: 220px;
        z-index: 1050!important;
        display: none;
    }
    .ui-dialog .float_win_tlt{
        width: 100%;
        background-color: #f1f1f1;
        position: relative;
        box-sizing: border-box;
        font-size: 16px;
        color: #669fc7;
        padding: 0;
        cursor: move;
    }
    .float_win_tlt:before, .float_win_tlt:after {
        content: "";
        display: table;
        border-collapse: collapse;
    }
    .float_win_tlt h4{
        font-weight:normal;
        padding-left: 15px;;
    }
    .float_win_tlt .close{
        width: 20px;
        height: 20px;
        background:url("../../admin/img/close.png") no-repeat right 0;
        background-size: 20px;
        position: absolute;
        z-index: 1100;
        right: 10px;
        top: 12px;
        opacity: 0.4;
    }
    .float_win_tlt .close:hover{
        opacity: 1;
        text-decoration: none;
    }
    .ui-dialog .ui-dialog-content{
        position: relative;
        border: 0;
        padding: .5em 1em;
        background: 0;
        overflow: auto;
        width: auto;
        min-height: 0px;
        max-height: none;
        height: 466px;
    }
    .ui-dialog .ui-dialog-content table{

        background: #eeeeee;
        border:#eeeeee 1px solid;
    }
    .tabtit{
        height: 30px;
        line-height: 30px;
        text-align: left;
        padding-left: 5px;
        font-weight: bold;
    }
    .tabrow {
        height: 25px;
        line-height: 25px;
        background: #fff;
        text-align: left;
        padding-left: 5px;
        padding-right: 5px;
        border-right: 1px dotted #efefef;
        border-bottom: #efefef 1px dotted;
    }
    .tabrow a{
        color: #428bca;
        text-decoration: none;
    }
    .float_win_2{
        position: absolute;
        height: auto;
        width: 600px;
        top: 100px;
        left: 270px;
        z-index: 1150!important;
        display: none;
    }
    .active:hover{ cursor: pointer;}
</style>
<div class="col-lg-12">
    <!--当前位置 start-->
    <div class="row">
        <div class="col-lg-12">
            <ol class="breadcrumb">
                <li><i class="fa fa-home mrg-r-sm"></i>首页</li>
                <li class="active"><span>服务记录</span></li>
            </ol>
        </div>
    </div>
</div>
<div id="l-map" style="height:800px;width: 100%;"></div>
<div class="ui-dialog float_win" id="recordWindow">
    <div class="float_win_tlt">
       <h4 class="smaller">派单记录</h4>
       <span class="close"></span>
    </div>
    <div class="ui-dialog-content">
        <table cellspacing="0" cellpadding="0" width="670">
            <tbody id="recordWindowContent"></tbody>
        </table>
    </div>
</div>
<div class="ui-dialog float_win_2" id="detailWindow">
    <div class="float_win_tlt">
        <h4 class="smaller">派单记录</h4>
        <span class="close"></span>
    </div>
    <div class="ui-dialog-content">
        <b>服务备注</b>
        <p id="detailWindowContent"></p>
    </div>
</div>
<script>
    $(document).ready(function(){
       $(".basic_info a").click(function(){
           $(".float_win").css("display","block");
       });
       $(".float_win .tabrow a").click(function(){
           $(".float_win_2").css("display","block");
       });
       $(".float_win span.close").click(function(){
           $("#recordWindowContent").html('');
           $(".float_win").css("display","none");
       });
        $(".float_win_2 span.close").click(function(){
            $("#detailWindowContent").text('');
            $(".float_win_2").css("display","none");
        });
    });
</script>
<script>
    function openSeviceRecordWindow(servantID) {
        if (typeof servantID === 'undefined' || !servantID) {
            return;
        }
        var param = {
            servant_id: servantID
        };
        baas_yl.call({
            http: $,
            method: 'get',
            uri: 'servant/servant/sign/list',
            data: param,
            success: function (json) {
                if (json.count) {
                    var list = json.list;
                    listServiceRecord(list);
                    $('#recordWindow').show();
                }
            }
        });
    }

    function listServiceRecord(list) {
        var table = $('#recordWindowContent');
        var thead = '<tr>'
                + '<th width="35" class="tabtit" scope="row">序号</th>'
                + '<td class="tabtit" width="70">服务对象</td>'
                + '<td class="tabtit" width="90">服务类型</td>'
                + '<td class="tabtit" width="280">签到/签出</td>'
                + '<td width="100" class="tabtit">查看</td>'
                + '</tr>';
        table.html(thead);
        for (var i = 0; i < list.length; i++) {
            var item = list[i];
            var tbody = '<tr>'
                    + '<th class="tabrow" scope="row">' + (i + 1) + '</th>'
                    + '<td class="tabrow">'
                    + (typeof item.order_username === 'undefined' || !item.order_username ? '' : item.order_username)
                    + '</td>'
                    + '<td class="tabrow">'
                    + (typeof item.order_serviceType3_title === 'undefined' || !item.order_serviceType3_title ? '' : item.order_serviceType3_title)
                    + '</td>'
                    + '<td class="tabrow">'
                    + (typeof item.sign_in_time === 'undefined' || !item.sign_in_time ? '' : item.sign_in_time)
                    + ' -&gt; '
                    + (typeof item.sign_out_time === 'undefined' || !item.sign_out_time ? '' : item.sign_out_time)
                    + '</td>'
                    + '<td class="tabrow">'
                    + '<a onclick="openServiceDetailWindow(&quot;'
                    + (typeof item.description === 'undefined' || !item.description ? '' : item.description)
                    + '&quot;)">服务笔记</a>'
                    + '</td></tr>';
            table.append(tbody);
        }
    }

    function openServiceDetailWindow(info) {
        if (typeof info === 'string') {
            $('#detailWindowContent').text(info);
            $('#detailWindow').show();
        }
    }
</script>